<template>
  <div class="container">
    <el-row class="t-l-r">
      <el-col>
        <date-range-picker
          v-model="datePicker1"
          type="daterange"
          align="right"
          size="small"
          class="w-240"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          shortcuts="C" />
        <el-select v-model="listQuery.lang" size="small" class="w-140">
          <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-select v-model="listQuery.sourceType" size="small" class="w-140">
          <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-select v-model="listQuery.newsType" size="small" class="w-140">
          <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-select v-model="listQuery.newsDataSelect" size="small" class="w-140">
          <el-option v-for="item in option4" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-select v-model="listQuery.topCount" size="small" class="w-140">
          <el-option v-for="item in option5" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-button type="primary" size="small" @click="refresh">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-t-15">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>资讯来源分类</span>
          </div>
          <div class="text item">
            <div class="one-item">
              <div id="source" style="width:'100%';height:340px"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>资讯类型分类</span>
          </div>
          <div class="text item">
            <div class="one-item">
              <div id="news" style="width:'100%';height:340px"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>一级标签分类</span>
          </div>
          <div class="text item">
            <div class="one-item">
              <div id="first" style="width:'100%';height:340px"/>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-t-15">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>二级标签分类</span>
          </div>
          <div class="text item tag-item">
            <div class="two-item">
              <div id="second" style="width:'100%';height:440px"/>
            </div>
            <div v-if="levelTwoTopData.length > 0" class="top">
              <h3>Top10二级标签</h3>
              <li v-for="item in levelTwoTopData" :key="item.name"><span class="label-left">{{ item.name }}</span><span class="label-right">{{ item.value }}</span></li>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>三级标签分类</span>
          </div>
          <div class="text item tag-item">
            <div class="two-item">
              <div id="third" style="width:'100%';height:440px"/>
            </div>
            <div v-if="levelThreeTopData.length > 0" class="top">
              <h3>Top10三级标签</h3>
              <li v-for="item in levelThreeTopData" :key="item.name"><span class="label-left">{{ item.name }}</span><span class="label-right">{{ item.value }}</span></li>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts';
import 'echarts-wordcloud/dist/echarts-wordcloud';
import { dateShortcutKeyJS } from '@/mixins/index.js';
import timeUtils from '@/utils/timeHandle.js';
import {
  typeAnalyzeApi,
  tagAnalyzeApi
} from '@/api/information-content-analysis.js';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date')
      ],
      option1: [{
        value: 1,
        label: '中文'
      }, {
        value: 2,
        label: '柬文'
      }],
      option2: [{
        value: -1,
        label: '全部资讯来源'
      }, {
        value: 1,
        label: '爬虫'
      }, {
        value: 2,
        label: '后台'
      }, {
        value: 3,
        label: '自媒体'
      }],
      option3: [{
        value: -1,
        label: '全部资讯类型'
      }, {
        value: 1,
        label: '图文'
      }, {
        value: 2,
        label: '图集'
      }, {
        value: 3,
        label: '视频'
      }, {
        value: 4,
        label: '小说'
      }, {
        value: 5,
        label: '微头条'
      }, {
        value: 6,
        label: '推广'
      }, {
        value: 8,
        label: '小视频'
      }, {
        value: 20,
        label: '专题'
      }],
      option4: [{
        value: 1,
        label: '热度'
      }, {
        value: 2,
        label: '点赞数'
      }, {
        value: 3,
        label: '评论数'
      }, {
        value: 4,
        label: '分享次数'
      }, {
        value: 5,
        label: '收藏数'
      }, {
        value: 6,
        label: '不喜欢'
      }, {
        value: 7,
        label: '新增资讯'
      }],
      option5: [{
        value: 100,
        label: 100
      }, {
        value: 500,
        label: 500
      }, {
        value: 1000,
        label: 1000
      }, {
        value: 2000,
        label: 2000
      }, {
        value: 3000,
        label: 3000
      }, {
        value: 5000,
        label: 5000
      }],
      listQuery: {
        startTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        lang: 1, // -1 全部 1 中文 2 柬文
        newsType: -1, // -1 全部 1、图文，2、图集，3、视频，4、小说、6、广告推广 8、小视频
        sourceType: -1, // -1全部 1(爬虫)，2(后台)，3(自媒体)
        newsDataSelect: 1, // 1:热度; 2:点赞; 3:评论; 4:分享; 5:收藏; 6:踩; 7:新增资讯;
        topCount: 1000
      },
      echartsData: {
        lang: [],
        newsSource: [],
        newsType: [],
        firstTags: [],
        secondTags: [],
        threeTags: []
      },
      levelTwoTopData: [],
      levelThreeTopData: []

    };
  },
  mounted() {
    this.init();
  },
  methods: {
    search() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];
      this.getList1();
      this.getList2();
    },
    init() {
      this.getList1();
      this.getList2();
    },
    refresh() {
      this.datePicker1 = [
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date')
      ];
      this.listQuery = {
        startTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime() - 3600 * 1000 * 24 * 1, 'date'),
        lang: 1,
        newsType: -1,
        sourceType: -1,
        newsDataSelect: 1,
        topCount: 1000
      };
      this.init();
    },
    getList1() {
      // var myChart = echarts.init(document.getElementById("lang"));
      // myChart.showLoading();
      var myChart2 = echarts.init(document.getElementById('source'));
      myChart2.showLoading();
      var myChart3 = echarts.init(document.getElementById('news'));
      myChart3.showLoading();

      typeAnalyzeApi(this.listQuery).then(res => {
        if (res.code == 200) {
          this.echartsData.lang = res.data.lang || [];
          this.echartsData.newsSource = res.data.newsSource || [];
          this.echartsData.newsType = res.data.newsType || [];

          // this.upDateEchart1(this.echartsData.lang)
          this.upDateEchart2(this.echartsData.newsSource);
          this.upDateEchart3(this.echartsData.newsType);
        }
      });
    },
    getList2() {
      var myChart = echarts.init(document.getElementById('first'));
      myChart.showLoading();
      var myChart2 = echarts.init(document.getElementById('second'));
      myChart2.showLoading();
      var myChart3 = echarts.init(document.getElementById('third'));
      myChart3.showLoading();

      this.levelTwoTopData = [];
      this.levelThreeTopData = [];

      tagAnalyzeApi(this.listQuery).then(res => {
        if (res.code == 200) {
          this.echartsData.firstTags = res.data.firstTags || [];
          this.echartsData.secondTags = res.data.secondTags || [];
          this.echartsData.threeTags = res.data.threeTags || [];

          this.upDateEchart4(this.echartsData.firstTags);

          this.redirectionName(this.echartsData.secondTags);
          this.upDateEchart5(this.echartsData.secondTags);
          if (this.echartsData.secondTags.length < 10) {
            this.levelTwoTopData = this.echartsData.secondTags;
          } else {
            this.levelTwoTopData = this.echartsData.secondTags.slice(0, 10);
          }

          this.redirectionName(this.echartsData.threeTags);
          this.upDateEchart6(this.echartsData.threeTags);
          if (this.echartsData.threeTags.length < 10) {
            this.levelThreeTopData = this.echartsData.threeTags;
          } else {
            this.levelThreeTopData = this.echartsData.threeTags.slice(0, 10);
          }
        }
      });
    },
    upDateEchart1(data) {
      var myChart = echarts.init(document.getElementById('lang'));
      myChart.showLoading();

      const xData = [];
      const seriesData = [];

      for (var i = 0; i < data.length; i++) {
        const item = data[i];
        xData.push(item.name);
        const obj = {
          value: item.count,
          name: item.name
        };
        seriesData.push(obj);
      }

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: Object.keys(data).length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: 0,
          right: 0
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: '50%',
          itemGap: 15,
          selectedMode: false, // 取消图例上的点击事件
          formatter: function(name) {
            var percent;
            data.forEach(item => {
              if (item.name == name) {
                percent = item.percent;
              }
            });
            var arr = [
              '{a|' + name + '}',
              '{b|' + percent + '}'
            ];
            return arr.join(' ');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: 'left',
                width: 50
              },
              b: {
                fontSize: 12,
                align: 'left',
                width: 70
              }
            }
          },
          data: xData
        },
        series: [
          {
            name: '语言分类',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },

    upDateEchart2(data) {
      var myChart = echarts.init(document.getElementById('source'));
      myChart.showLoading();

      const xData = [];
      const seriesData = [];

      for (var i = 0; i < data.length; i++) {
        const item = data[i];
        xData.push(item.name);
        const obj = {
          value: item.count,
          name: item.name
        };
        seriesData.push(obj);
      }

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: Object.keys(data).length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: 0,
          right: 0
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: '40%',
          itemGap: 15,
          selectedMode: false, // 取消图例上的点击事件
          formatter: function(name) {
            var percent;
            data.forEach(item => {
              if (item.name == name) {
                percent = item.percent;
              }
            });
            var arr = [
              '{a|' + name + '}',
              '{b|' + percent + '}'
            ];
            return arr.join(' ');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: 'left',
                width: 40
              },
              b: {
                fontSize: 12,
                align: 'left',
                width: 40
              }
            }
          },
          data: xData
        },
        series: [
          {
            name: '资讯来源分类',
            type: 'pie',
            radius: '20%',
            center: ['30%', '55%'],
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    upDateEchart3(data) {
      var myChart = echarts.init(document.getElementById('news'));
      myChart.showLoading();

      const xData = [];
      const seriesData = [];

      for (var i = 0; i < data.length; i++) {
        const item = data[i];
        xData.push(item.name);
        const obj = {
          value: item.count,
          name: item.name
        };
        seriesData.push(obj);
      }

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: Object.keys(data).length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: 0,
          right: 0
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: 90,
          itemGap: 15,
          selectedMode: false, // 取消图例上的点击事件
          formatter: function(name) {
            var percent;
            data.forEach(item => {
              if (item.name == name) {
                percent = item.percent;
              }
            });
            var arr = [
              '{a|' + name + '}',
              '{b|' + percent + '}'
            ];
            return arr.join(' ');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: 'left',
                width: 50
              },
              b: {
                fontSize: 12,
                align: 'left',
                width: 40
              }
            }
          },
          data: xData
        },
        series: [
          {
            name: '资讯来源分类',
            type: 'pie',
            radius: '20%',
            center: ['30%', '55%'],
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    upDateEchart4(data) {
      var myChart = echarts.init(document.getElementById('first'));
      myChart.showLoading();

      const xData = [];
      const seriesData = [];

      for (var i = 0; i < data.length; i++) {
        const item = data[i];
        xData.push(item.name);
        const obj = {
          value: item.count,
          name: item.name
        };
        seriesData.push(obj);
      }

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: data.length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: 0,
          right: 0
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: 10,
          itemGap: 5,
          selectedMode: false, // 取消图例上的点击事件
          formatter: function(name) {
            var percent;
            data.forEach(item => {
              if (item.name == name) {
                percent = item.percent;
              }
            });
            var arr = [
              '{a|' + name + '}',
              '{b|' + percent + '}'
            ];
            return arr.join(' ');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: 'left',
                width: 80
              },
              b: {
                fontSize: 12,
                align: 'left',
                width: 40
              }
            }
          },
          data: xData
        },
        series: [
          {
            name: '一级标签分类',
            type: 'pie',
            radius: '50%',
            center: ['30%', '50%'],
            data: seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    upDateEchart5(data) {
      var myChart = echarts.init(document.getElementById('second'));
      myChart.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: data.length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          show: true
        },
        backgroundColor: '#fff',
        series: [{
          type: 'wordCloud',
          gridSize: 5,
          sizeRange: [12, 50],
          rotationRange: [0, 0],
          textStyle: {
            normal: {
              color: function() {
                return (
                  'rgb(' +
                                    Math.round(Math.random() * 255) +
                                    ', ' +
                                    Math.round(Math.random() * 255) +
                                    ', ' +
                                    Math.round(Math.random() * 255) +
                                    ')'
                );
              }
            }
          },
          left: 0,
          top: 0,
          right: 150,
          bottom: 0,
          width: '80%',
          height: '100%',
          data: data
        }]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    upDateEchart6(data) {
      var myChart = echarts.init(document.getElementById('third'));
      myChart.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        title: {
          show: data.length === 0,
          textStyle: {
            color: '#909399',
            fontSize: 14,
            fontWeight: 400
          },
          text: '暂无数据',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          show: true
        },
        grid: {
          left: 60,
          right: 200
        },
        backgroundColor: '#fff',
        series: [{
          type: 'wordCloud',
          gridSize: 5, // 用来调整词之间的距离
          sizeRange: [14, 50], // 用来调整字的大小范围
          rotationRange: [0, 0],
          textStyle: {
            normal: {
              color: function() {
                return (
                  'rgb(' +
                                    Math.round(Math.random() * 255) +
                                    ', ' +
                                    Math.round(Math.random() * 255) +
                                    ', ' +
                                    Math.round(Math.random() * 255) +
                                    ')'
                );
              }
            }
          },
          left: 0,
          top: 0,
          right: 150,
          bottom: 0,
          width: '70%',
          height: '100%',
          data: data
        }]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    redirectionName(json) {
      if (json.length < 1) return json;
      for (var i in json) {
        for (var j in json[i]) {
          if (j == 'count') {
            json[i]['value'] = json[i][j];
            delete json[i]['count'];
          }
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
    padding: 15px;
    .w-140 {
        width: 140px;
    }
    .t-l-r {
        text-align: right;
    }
    .p-t-15 {
        padding-top: 25px;
    }
    .fr {
        float: right;
    }
    .fl {
        float: left;
    }
    .one-item {
        height: 350px;
        width: 100%;
    }
    .two-item {
        height: 440px;
        width: 100%;
    }
    .tag-item {
        position: relative;
        .top {
			z-index: 99999;
            width: 190px;
            height: 440px;
            position: absolute;
            right: 0;
            top: 50px;
			h3{
				font-size: 14px;
				line-height: 2;
				font-weight: bolder;
			}
			li{
				font-size: 16px;
				line-height: 1.5;
			}
			.label-left{
				display: inline-block;
				width: 150px;
			}
			.label-right {
				color: red;
			}
        }
    }
}
</style>
